<template>
	<section>
		<!--start  面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{path:'/goods'}">商品</el-breadcrumb-item>
				<el-breadcrumb-item :to="{path:'/goods/stockCheckoutList'}">商品出库</el-breadcrumb-item>
				<el-breadcrumb-item>新增商品出库</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--end  面包屑-->

		<div class="order" ref="content">
			<div class="ruku-sousuo">
				<div class="ruku-left">
					<el-form :model="StockCheckoutData" :rules="vue_rule_rules" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
	  					<el-form-item label="仓库" prop="warehouseCode">
						  <el-select v-model="StockCheckoutData.warehouseName" disabled>
						    <el-option v-for="(item,index) in vue_warehouse_listAll" :label="item.label" :value="item.value"></el-option>
						  </el-select>
						</el-form-item>
					</el-form>
				</div>
				<div class="ruku-right">
					<el-form :model="StockCheckoutData" label-width="100px" class="demo-ruleForm">
						<el-form-item label="出库日期" >
						    <el-date-picker
						      v-model="StockCheckoutData.checkoutDate"
						      type="datetime"
						      placeholder="选择日期">
						    </el-date-picker>
					    </el-form-item>
				    </el-form>
				</div>
			</div>
			<div class="order-tab" :class="{border:vue_rule_goodsLength}">
				<table class="order-tab1" border="0" cellspacing="0" cellpadding="0" width="100%">
					<col width="6%" />
					<col width="15%" />
					<col width="29%" />
					<col width="25%" />
					<col width="10%" />
					<col width="15%" />
					<tr class="tab-th">
						<td>序号</td>
						<td>商品编码</td>
						<td>商品名称</td>
						<td>规格</td>
						<td>出库数量</td>

						<td>备注</td>
					</tr>
					<tr class="hoverTr" v-for="(item, index) in StockCheckoutData.checkoutGoodsStr">
						<td>
							<span class="order-num">
								{{index+1}}
							</span>
							<span class="order-add">
								<em class="iconfont" @click="vue_goods_minus(index)">&#xe684;</em>
							</span>
						</td>
						<td>{{item.goodsCode}}</td>
						<td>{{item.goodsName}}</td>
						<td>{{item.goodsSkuValue}}</td>
						<td><input class="order-input1" @blur="vue_goods_numberFilter(index)" @keydown="vue_goods_numberStop($event)" v-model="item.goodsCheckoutNum"></td>
						<td>
							<template>
								<el-button type="text">
									<em v-if="!item.goodsRemark" class="iconfont" @click="vue_remark_dialogPop(index)">&#xec52;</em>
									<span class="ellipsis" v-else @click="vue_remark_dialogPop(index)"><em class="iconfont">&#xe617;</em>{{item.goodsRemark}}</span>
								</el-button>
							</template>
						</td>
					</tr>
					<tr class="hoverTr addinpt" >
						<td>{{StockCheckoutData.checkoutGoodsStr.length+1}}</td>
						<td colspan="2">
							<template>
								<el-select @change="vue_goods_add" filterable v-model="vue_goods_selectVal"  placeholder="输出编码/商品名称" >
									<el-option v-for="item in vue_goods_optionList" :label="item.goodsName + ' ( '+  item.goodsSkuValue + ' )'" :value="item.goodsCode">
									</el-option>
								</el-select>
							</template>
							<em class="iconfont" style="position: absolute;right: 8px;top: 10px;cursor: pointer;display: none;">&#xe607;</em>
						</td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
				</table>

			</div>
			<span v-if="vue_rule_goodsLength" style="color: red;">商品不能为空</span>
			<div class="ruku-section">
				<div class="section-left">
					<el-form :model="StockCheckoutData" :rules="vue_rule_rules" ref="ruleForm2" label-width="100px" class="demo-ruleForm">

	  					<el-form-item label="出库类型" prop="checkoutType">
						  <el-select v-model="StockCheckoutData.checkoutType" placeholder="请选择">
						    <el-option
						      v-for="item in vue_checkoutType_listAll"
						      :label="item.ddlistName"
						      :value="item.ddlistCode">
						    </el-option>
						  </el-select>
						</el-form-item>

						<el-form-item label="经办人">
					    	<el-input v-model="StockCheckoutData.transactOpName"></el-input>
					  	</el-form-item>

	  					<el-form-item label="制单人">
						 	<el-input type="text" disabled v-model="StockCheckoutData.createOpName"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<div class="section-right">
					<el-form :model="StockCheckoutData" label-width="100px" class="demo-ruleForm">
	  					<el-form-item label="备注">
						    <el-input type="textarea" resize="none" v-model="StockCheckoutData.checkoutRemark" placeholder="请输出备注信息，最多不超过500个字"></el-input>
						  </el-form-item>
					</el-form>
				</div>
			</div>

			<div class="order-deta">
				<el-button type="primary" :disabled="clickBtn" @click="save">保存</el-button>
				<el-button @click="$router.push({path:'/goods/stockCheckoutList'})">取消</el-button>
			</div>
		</div>
		<!--添加备注-->
				<div class="beizhu-box">
					<el-dialog title="添加商品备注" :visible.sync="vue_remark_dialogEnable">
				      <el-input  type="textarea" v-model="vue_remark_value" auto-complete="off" class="addbeuzhu"  placeholder="备注信息最多不超过250个字"></el-input>
					  <div slot="footer" class="dialog-footer">
					  	<el-button type="primary" @click="vue_remark_ok">确 定</el-button>
					    <el-button @click="vue_remark_cancel">取 消</el-button>
					  </div>
					</el-dialog>
				</div>
	</section>
</template>

<script>
	import helpComponents from '../../../components/help/help'
	export default {
		components:{helpComponents},
		data() {
			return {
				clickBtn:false,                 //请求数据后禁用按钮
				/* start 备注 */
				vue_remark_dialogEnable:false,  //是否显示备注输出弹出层
				vue_remark_tableIndex:0,  //用来存储点击的是第几个备注
				vue_remark_value:"",  //用来存储备注
				/* end 备注 */
				/* start 验证 */
				vue_rule_form1:false,  //第一个form验证结果
				vue_rule_form2:false,  //第二个form验证结果
				vue_rule_goodsLength:false,  //是否选择了商品
				vue_rule_rules:{  //验证规则
		          warehouseCode: [{ required: true, message: '仓库不能为空', trigger: 'change' }],
		          checkoutType: [{ required: true, message: '出库类型不能为空', trigger: 'change' }]
		        },
				/* end 验证 */
				/* start 商品 */
				vue_goods_optionList:[],  //所有可购商品
				vue_goods_selectVal:"",  //选择的商品
				vue_goods_num:0,  //记录商品的数量
				/* end 商品 */
				/* start 仓库 */
				vue_warehouse_listAll:[],  //所有仓库
				/* end 仓库 */
				/* start 出库类型 */
				vue_checkoutType_listAll:[],  //所有出库类型
				/* end 出库类型 */
				StockCheckoutData:{
					warehouseCode :"",  //仓库代码
					warehouseName :"",  //仓库名称
					checkoutDate :"",  //出库日期
					checkoutType :"",  //出库类型
					transactOpName :"",  //经办人名称
					createOpName :"",  //制单人名称
					checkoutRemark :"",  //出库备注
					checkoutGoodsStr:[],  //出库商品
				},
			}
		},
		methods: {
			query_saleGoodsAll(){  //请求商品列表
				this.axios({
					method: 'POST',
					url: "/v3/basic/goodss/listAll",
					data:{}
				}).then((res) => {
					this.vue_goods_optionList = res.data.list;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				});
			},
			query_saleGoods(goodsCode,arr,index){  //请求单个商品
				this.axios({
					method:"GET",
					url:"/v3/sale/goodss/"+goodsCode,
				}).then((res)=>{
					this.$set(arr,index,{
						goodsCode:res.data.list[0].goodsCode,
						goodsName:res.data.list[0].goodsName,
						goodsSkuValue:res.data.list[0].goodsSkuValue,
						goodsCheckoutNum:1,
						goodsSkuCode:res.data.list[0].goodsSkuCode,
						goodsRemark:"",
					})
				}).catch((err)=>{

				})
			},
			query_warehouse(){  //获取仓库
				this.axios({
					method:"POST",
					url:"/v3/goods/warehouses/queryDefault",
					data:{}
				}).then((res)=>{
					//this.vue_warehouse_listAll = res.data;
					/*放置默认图片*/
					this.StockCheckoutData.warehouseCode = res.data.warehouseCode;
					this.StockCheckoutData.warehouseName = res.data.warehouseName;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data);
				});
			},
			query_checkoutType(){  //获取出库类型
				this.axios({
					method:"POST",
					url:"/v3/system/ddlists/00100000032/listAll",
					data:{}
				}).then((res)=>{
					this.vue_checkoutType_listAll = res.data.list;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data);
				});
			},
			query_createOpName(){  //获取制单人名称
				this.axios({
			        method: 'GET',
					url: "/v3/member/operators"
				}).then((res) => {
					this.StockCheckoutData.createOpName = res.data.operatorName;	// 制单人名称
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				});
			},
			vue_goods_minus(index){  //减商品
				this.StockCheckoutData.checkoutGoodsStr.splice(index,1);
				this.vue_goods_num--;
				if(this.vue_goods_num<=0){
					this.vue_rule_goodsLength =true;
				}
			},
			vue_goods_add(goodsCode){  //加商品
				if(goodsCode){
					this.query_saleGoods(goodsCode,this.StockCheckoutData['checkoutGoodsStr'],this.vue_goods_num);
					this.vue_goods_num++;
					this.vue_goods_selectVal = "";
					this.vue_rule_goodsLength=false;
				}
			},
			vue_goods_numberFilter(index){  //过滤小于等于0的数字为0.01
				this.StockCheckoutData.checkoutGoodsStr[index].goodsCheckoutNum=parseFloat(this.StockCheckoutData.checkoutGoodsStr[index].goodsCheckoutNum)<=0||isNaN(parseFloat(this.StockCheckoutData.checkoutGoodsStr[index].goodsCheckoutNum))?0.01:parseFloat(this.StockCheckoutData.checkoutGoodsStr[index].goodsCheckoutNum);
			},
			vue_goods_numberStop(e){  //通过阻止默认事件来限制用户只能输出数字
				if(!((e.keyCode>=48&&e.keyCode<=57)||(e.keyCode>=96&&e.keyCode<=105)||(e.keyCode==46)||(e.keyCode==39)||(e.keyCode==9)||(e.keyCode==189)||(e.keyCode==109)||(e.keyCode==8)||(e.keyCode==116)||(e.keyCode==13)||(e.keyCode==110)||(e.keyCode==190)))e.preventDefault();
			},
			vue_remark_dialogPop(index){  //弹出备注输出框
				this.vue_remark_value=!!this.StockCheckoutData.checkoutGoodsStr[index].goodsRemark?this.StockCheckoutData.checkoutGoodsStr[index].goodsRemark:"";
				this.vue_remark_dialogEnable = true;
			 	this.vue_remark_tableIndex = index;
			},
			vue_remark_ok(){  //备注输出框确认按钮
				this.vue_remark_dialogEnable = false;
				this.StockCheckoutData.checkoutGoodsStr[this.vue_remark_tableIndex].goodsRemark = this.vue_remark_value;
			},
			vue_remark_cancel(){  //备注输出框取消按钮
				this.vue_remark_dialogEnable = false;
			},

			save(){  //保存方法
				this.$refs['ruleForm1'].validate((valid)=>{
					this.vue_rule_form1 = valid;
				})
				this.$refs['ruleForm2'].validate((valid)=>{
					this.vue_rule_form2 = valid;
				})
				if(!this.StockCheckoutData.checkoutGoodsStr.length){
					this.vue_rule_goodsLength=true;
				}else{
					this.vue_rule_goodsLength=false;
				}

				if(this.vue_rule_form1&&this.vue_rule_form2&&!this.vue_rule_goodsLength){
					this.clickBtn=!this.clickBtn;
					this.axios({
							method:"POST",
							url:"/v3/stock/checkouts",
							data:{
								"warehouseCode":this.StockCheckoutData.warehouseCode,
								"warehouseName":this.StockCheckoutData.warehouseName,
								"checkoutDate":this.StockCheckoutData.checkoutDate,
								"checkoutType":this.StockCheckoutData.checkoutType,
								"transactOpName":this.StockCheckoutData.transactOpName,
								"createOpName":this.StockCheckoutData.createOpName,
								"checkoutRemark":this.StockCheckoutData.checkoutRemark,
								"stockCheckoutGoodsStr":JSON.stringify(this.StockCheckoutData.checkoutGoodsStr)
							}
						}).then((res)=>{
							this.clickBtn=!this.clickBtn;
							this.$router.go(-1)
						}).catch((err)=>{
							this.clickBtn=!this.clickBtn;
							this.Public.openError(this,err.response.data)
						})
				}

			},
		},
		created(){
			this.query_saleGoodsAll();  //获取所有的商品
			this.query_warehouse();  //获取所有的仓库
			this.query_checkoutType();  //获取所有出库类型
			this.query_createOpName();  //获取制单人
		},
		mounted() {
			//动态设置页面高度
			this.$refs['content'].style.height = document.documentElement.clientHeight - 105 + 'px';
		},

	}
</script>

<style scoped>
	@import "../../../assets/css/zijin.css";
	.location {
		padding: 3px 0 15px 0;
	}
	.order {
		background: #fff;
		padding: 5px 20px;
		overflow-y: auto;
		font-family: "微软雅黑";
		position: relative;
	}
	.order-tab{
		margin-top: 15px;
		border-left: 1px solid #e7e9f1;
	}
	.order-tab1 td{
		text-align: center;
		padding: 0px 0;
		border: 1px solid #e7e9f1;
		border-top: 0;
		border-left:0;
		position: relative;
	}
	.order-tab1 td img{
		width: 45px;
		margin: 0 auto;
	}
	.order-tab1 .tab-th td{
		background: #eff1f8;
		padding: 14px 0;
	}
	.order-tab1 .order-input1{
		height: 34px;
		width: 100px;
		border: 1px solid #cdd9e6;
		border-radius:4px ;
		text-align: center;
	}
	.dorder-td td{
		padding: 15px 0;
	}
	.dorder-tend td{
		padding: 12px 15px;
		text-align: right;
	}
	.dorder-tend p span{
		display: inline-block;
		width: 120px;
	}
	.dorder-tend p:last-child span{
		color: #f33333;
		font-size: 20px;
	}
	.dorder-tend p {
		margin-top: 0px;
	}
	.order-deta{
		position: fixed;
		bottom: 10px;
		width: 100%;
		background: #fff;
		/*left: 0;*/
		padding-bottom: 10px;
	}
	.order-deta span{
		margin-right: 10px;
	}
	.order-deta a{
		display: inline-block;
		width: 80px;
		height: 30px;
		text-align: center;
		line-height: 31px;
		border-radius: 20px;
		border: 1px solid #cdd9e6;
		margin-top: 30px;
		cursor: pointer;
	}
	.order-deta a:first-child{
		background: rgb(19, 193, 159);
		color: #fff;
		border: 0;
		height: 32px;
		line-height: 32px;
	}
	.order-add{
		display: none;
		cursor:pointer;
	}
	.hoverTr:hover .order-num {
		display: none;
	}
	.hoverTr:hover {
		background: #eff4f9;
	}
	.hoverTr:hover .order-add {
		display: inline-block;
	}
	.hoverTr td{
		height: 54px;
		padding: 0;
	}
	.ruku-sousuo{
		overflow: hidden;
		margin-top: 15px;

		margin-left: -10px;
	}
	.ruku-sousuo .el-select,.ruku-sousuo .el-date-editor.el-input{
		width: 300px;
	}
	.ruku-left{
		float: left;
	}
	.ruku-right{
		float: left;
	}
	.house{
		color: red;
		position: relative;
		top: 2px;
	}
	.ruku-section{
		overflow: hidden;
		margin-top: 20px;
	}
	.section-left{
		float: left;
		width: 400px;
		margin-left: -10px;
	}
	.section-left .el-select{
		width: 300px;
	}
	.section-right{
		float: left;
		width: 400px;
	}
	.order-tab{
		margin-top: 0;
	}
	.border{
		border: 1px solid red;
	}
	.ellipsis{
		display:inline-block;
		width:100px;
		white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
</style>

